<template>
  <div class="content">
    <div class="verificationInfo">
      <div class="verificationBox">
        <p>订单核销码</p>
        <span @click="updateStateClick">编辑</span>
      </div>
      <div class="verificationInputBox">
        <input
          :value="verificationCode"
          v-model="verificationCode"
          maxlength="999"
          class="verificationCalss"
          :disabled="!isUpdate"
        />
      </div>
      <p class="hint">适用于“到店自取”订单</p>
      <div class="btnBox" v-if="isUpdate">
        <button size="mini" @click="updateExtractCode">确定</button>
        <button size="mini" @click="updateStateClick">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { UPDATE_SHOP_BASE_INFO } from '@/api'

export default {
  components: {},
  data () {
    return {
      verificationCode: '',
      isUpdate: false
    }
  },
  created () {},
  onShow () {
    this.verificationCode = this.$cookie.get('account').extractCode
    this.isUpdate = false
  },
  methods: {
    updateStateClick () {
      const vm = this
      if (vm.isUpdate) {
        vm.isUpdate = false
      } else {
        vm.isUpdate = true
      }
    },
    updateExtractCode () {
      const vm = this
      if (!vm.verificationCode) {
        vm.$toast('请输入核销码')
        return false
      }
      vm.updateShopBusinessState()
    },
    updateShopBusinessState () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        extractCode: vm.verificationCode
      }
      UPDATE_SHOP_BASE_INFO(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            let obj = vm.$cookie.get('account')
            obj.extractCode = vm.verificationCode
            vm.$cookie.set('account', obj)
            vm.$alert('核销码编辑成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 360px;
  margin: auto;
  .verificationInfo {
    width: calc(100% - 20px);
    margin: auto;
    height: auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .verificationBox {
      width: 310px;
      margin: auto;
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 14px;
        color: #000;
      }
      span {
        font-size: 14px;
        color: #6d94ee;
      }
    }
    .verificationInputBox {
      width: 300px;
      margin: 10px auto 0;
      .verificationCalss {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        padding: 0;
        padding-left: 10px;
        color: #000;
        font-size: 14px;
        height: 40px;
      }
    }
    .hint {
      width: 300px;
      margin: 10px auto 0;
      font-size: 14px;
      color: #9f9f9f;
    }
    .btnBox {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      > button:nth-child(1) {
        color: #fff;
        background: $blue;
      }
    }
  }
}
</style>
